<template>
  <div
    id="man"
    style="
      width: 100%;
      height: 374px;
      background-color: #fff;
      border-radius: 8px;
    "
  ></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      var myecart = echarts.init(document.getElementById("man"));
      myecart.setOption({
        title: {
          text: "停车场今日区域消费图",
          padding: 16,
          subtextStyle: {
            color: "#6963b9",
          },
          
        },
        
        grid: {
          left: "5%",
          right: "2%",
          bottom: "8%",
          containLbel: true,
        },
        xAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#ccc",
            },
          },
          data: [
            "1日",
            "3日",
            "6日",
            "9日",
            "12日",
            "15日",
            "18日",
            "21日",
            "24日",
            "27日",
            "30日",
          ],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#ccc",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            data: [
              6000, 2500, 9000, 3000, 10000, 12000, 17000, 9000, 17000, 9000,
              10000,
            ],
            type: "line",
            stack: "x",
            smooth: true,
            lineStyle: {
              width: 9,
              shadowOffsetX: 3, // 折线的X偏移
              shadowOffsetY: 3, // 折线的Y偏移
              shadowBlur: 8, // 折线模糊
              shadowColor: "rgba(145, 132, 132, 1)", //折线颜色
            },
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#cfa5f1", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#7b3bea", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          {
            data: [
              3500, 5000, 1750, 2800, 5250, 6000, 7000, 5990, 6800, 7000, 18000,
            ],
            type: "line",
            stack: "x",
            smooth: true,
            lineStyle: {
              width: 9,
              shadowOffsetX: 3, // 折线的X偏移
              shadowOffsetY: 3, // 折线的Y偏移
              shadowBlur: 8, // 折线模糊
              shadowColor: "rgba(145, 132, 132, 1)", //折线颜色
            },

            color: {
              type: "linear",

              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#cee5f3", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#535bee", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          {
            data: [
              7000, 2800, 5990, 6800, 1750, 1000, 5000, 3000, 1750, 3500, 5250,
            ],
            type: "line",
            stack: "x",
            smooth: true,
            lineStyle: {
              width: 9,
              shadowOffsetX: 3, // 折线的X偏移
              shadowOffsetY: 3, // 折线的Y偏移
              shadowBlur: 8, // 折线模糊
              shadowColor: "rgba(145, 132, 132, 1)", //折线颜色
            },
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,

              colorStops: [
                {
                  offset: 0,
                  color: "#faf4d4", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#ff9e3b", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
